<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
<body>
<form action="{:url('admin/good/save')}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label>商品名称</label>
        <input type="text" name="good_name" class="form-control">
    </div>
    <div class="form-group">
        <label for="exampleFormControlFile1">商品logo</label>
        <input type="file" name="images[]" multiple class="form-control-file" id="exampleFormControlFile1">
    </div>
    <div class="form-group">
        <label>价格下限</label>
        <input type="text" name="last" class="form-control">
    </div>
    <div class="form-group">
        <label>价格上限</label>
        <input type="text" name="top" class="form-control">
    </div>
    <div class="form-group">
        <label>创建起始时间</label>
        <input type="datetime-local" name="createtime" class="form-control">
    </div>
    <div class="form-group">
        <label>创建结束时间</label>
        <input type="datetime-local" name="endtime" class="form-control">
    </div>
    <div class="form-group">
        <label>选择商品分类</label>
        <select  class="form-control cate">
            <option value="">顶级分类</option>
        </select>
        <select  class="form-control cate zz">
            <option value="">二级分类</option>
        </select>
        <select class="form-control" name="type_id">
            <option value="">三级分类</option>
        </select>
    </div>
    <div class="form-group">
        <select  class="form-control brands" name="brand_id">
            <option value="">选择商品品牌</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
<script>
    $(function () {
        ajaxSelect();

        $(".cate").on('change',function () {
            var id = $(this).val();
            var _this = this;
            ajaxSelect(id,_this);
        })

        $(".brands").on("focus",function () {
            var type_id = $(".zz").val();
            $.ajax({
                url:"http://www.week1.com/brands",
                type:"post",
                data:{id:type_id},
                success(res){
                    var option = "";
                    for (const re of res) {
                        option+="<option value='"+re.id+"'>"+re.bname+"</option>";
                    }
                   $(".brands").html(option);
                }
            })
        })
    })




    function ajaxSelect(id,_this){
        $.ajax({
            url:"http://www.week1.com/select",
            type:"post",
            data:{id:id},
            success(res){
                var option = "";
                for (const re of res) {
                    option+="<option value='"+re.id+"'>"+re.tname+"</option>";
                }
                if (id){
                    $(_this).next('select').find('option').not(":first").remove();
                    $(_this).next('select').append(option);
                }else {
                    $(".cate:first").append(option);
                }
            }
        })
    }
</script>